<!--
 * @Descripttion:
 * @version:
 * @Author: sueRimn
 * @Date: 2020-11-14 14:16:34
 * @LastEditors: sueRimn
 * @LastEditTime: 2020-11-18 13:48:57
-->
<template>
  <div class="app-container">
    <el-form ref="ruleForm" :model="form" label-width="90px" :rules="rules">
      <el-form-item label="机构名称" prop="nickname">
        <el-input
          v-model="form.nickname"
          class="inputBoxWidth"
          placeholder="请输入机构名称"
        />
      </el-form-item>
      <el-form-item label="联系电话" prop="phone">
        <el-input
          v-model="form.phone"
          class="inputBoxWidth"
          placeholder="请输入联系电话"
        />
      </el-form-item>
      <el-form-item label="客服邮箱" prop="email">
        <el-input
          v-model="form.email"
          class="inputBoxWidth"
          placeholder="请输入客服邮箱"
        />
      </el-form-item>
      <el-form-item label="客服微信" prop="wechat">
        <el-input
          v-model="form.wechat"
          class="inputBoxWidth"
          placeholder="请输入客服微信"
        />
      </el-form-item>
      <el-form-item label="客服电话" prop="online_phone">
        <el-input
          v-model="form.online_phone"
          class="inputBoxWidth"
          placeholder="请输入客服电话"
        />
      </el-form-item>
      <el-form-item label="上传头像">
        <upload1
          ref="upload4"
          :config="config"
          :urlnow="{ url: form.avatar }"
          :upload-id="'uploadId4'"
          :type="4"
          @filepath="filepath4(arguments)"
        />
      </el-form-item>
      <el-form-item label="学校地址" prop="address">
        <div class="address">
          <el-select v-model="provinec_id" filterable placeholder="请选择省份">
            <el-option
              v-for="item in provinceData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="city_id"
            filterable
            placeholder="请选择市"
            style="margin-left: 10px"
          >
            <el-option
              v-for="item in cityData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
            <!-- <el-input v-model="ruleForm1.otherAddress" /> -->
          </el-select>
          <el-select
            v-model="area_id"
            filterable
            placeholder="请选择地区"
            style="margin-left: 10px"
          >
            <el-option
              v-for="item in areaData_ary"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-input
            v-model="form.address"
            class="inputAddress"
            placeholder="请输入详细地址"
          />
        </div>
      </el-form-item>
      <el-form-item label="简介" prop="brieftext">
        <el-input
          v-model="form.brieftext"
          class="inputBoxWidth"
          type="textarea"
          :rows="4"
        />
      </el-form-item>
      <el-form-item label="分校">
        <el-button
          size="mini"
          type="primary"
          @click="addFenXiao"
        >新增</el-button>
      </el-form-item>
      <!-- ////新增分校 -->
      <div
        v-for="(fenXiaoitem, fenXiaoindex) in branch"
        :key="fenXiaoindex"
        class="fenXiao"
      >

        <el-form label-width="90px">
          <el-form-item label="分校名称">
            <el-input
              v-model="fenXiaoitem.branch_name"
              class="inputBoxWidth"
              placeholder="请输入分校名称"
            />
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="fenXiaoitem.phone"
              class="inputBoxWidth"
              placeholder="请输入联系电话"
            />
          </el-form-item>
          <el-form-item label="联系邮箱">
            <el-input
              v-model="fenXiaoitem.email"
              class="inputBoxWidth"
              placeholder="请输入联系邮箱"
            />
          </el-form-item>
          <el-form-item label="联系微信">
            <el-input
              v-model="fenXiaoitem.wechat"
              class="inputBoxWidth"
              placeholder="请输入联系微信"
            />
          </el-form-item>
          <el-form-item label="学校地址">
            <Adress
              :ref="'Adress_' + fenXiaoindex"
              :address-obj="{
                address: fenXiaoitem.address,
                provinec_id: fenXiaoitem.provinec_id,
                city_id: fenXiaoitem.city_id,
                area_id: fenXiaoitem.area_id,
              }"
            />
          </el-form-item>
        </el-form>
        <div class="delFenXiao">
          <el-button
            size="mini"
            type="danger"
            @click="delFenXiao(fenXiaoindex)"
          >删除</el-button>
        </div>
        <el-divider />
      </div>

      <el-form-item>
        <el-button type="primary" @click="editSave('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getTeacherById } from '@/api/teacher'
import { edit_Mechanism } from '@/api/trembleSchool/introduce'
import provinceData from '@/assets/js/level_linkage/province'
import cityData from '@/assets/js/level_linkage/city'
import areaData_ary from '@/assets/js/level_linkage/area'
import upload1 from '@/components/upload/index1'
import { uploadConfig } from '@/components/upload/config/upload'
import Adress from './components/address'
export default {
    name: 'TrembleSchool',
    components: {
        upload1,
        Adress
    },
    data() {
        var validatePass2 = (rule, value, callback) => {
            if (
                !this.provinec_id ||
        !this.city_id ||
        !this.area_id ||
        !this.form.address
            ) {
                callback(new Error('请完善地址'))
            } else {
                callback()
            }
        }
        return {
            form: {},
            // 地区数据
            provinceData,
            cityData: [],
            areaData_ary: [],
            filepath4li: [],
            config: uploadConfig,
            provinec_id: null,
            city_id: null,
            area_id: null,
            // 分校
            branch: [],

            rules: {
                nickname: [
                    { required: true, message: '请输入机构名称', trigger: 'blur' }
                ],
                phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
                email: [{ required: true, message: '请输入客服邮箱', trigger: 'blur' }],
                wechat: [
                    { required: true, message: '请输入客服微信', trigger: 'blur' }
                ],
                online_phone: [
                    { required: true, message: '请输入客服电话', trigger: 'blur' }
                ],
                address: [
                    { required: true, validator: validatePass2, trigger: 'blur' }
                ],
                brieftext: [{ required: true, message: '请输入简介', trigger: 'blur' }]
            }
        }
    },
    watch: {
        provinec_id(item) {
            if (this.form.provinec_id != item) {
                this.city_id = null
                this.area_id = null
            }
            console.log('省item', item)
            this.cityInitData(item)
        },
        city_id(item) {
            console.log('市item', item)
            if (this.form.provinec_id != this.provinec_id) {
                this.area_id = null
            }
            this.areaInitData(item)
        }
    },
    created() {
    // 初始化表格
        this.getList()
    },
    methods: {
    // 获取列表数据
        async getList() {
            var queryData = {
                id: this.$store.getters.institute_id
            }
            var data = await getTeacherById(queryData)
            this.form = data.data
            if (this.form.provinec_id) {
                this.provinec_id = this.form.provinec_id + ''
                this.city_id = this.form.city_id + ''
                this.area_id = this.form.area_id + ''
                this.cityInitData(this.form.provinec_id)
                this.areaInitData(this.form.city_id)
            }
            this.branch = this.form.branch
            console.log('本机构数据：', data)
        },
        // 根据省拿到市
        cityInitData(item) {
            if (item) {
                var city_ary = []
                for (var i in cityData) {
                    for (var k in cityData[i]) {
                        if (cityData[i][k].value.substring(0, 2).indexOf(item) > -1) {
                            city_ary.push(cityData[i][k])
                        }
                    }
                }
                this.cityData = city_ary
            }
            console.log('城市列表', this.cityData)
        },
        // 根据市拿到区
        areaInitData(item) {
            if (item) {
                var area_ary = []
                for (var i in areaData_ary) {
                    for (var k in areaData_ary[i]) {
                        var arr = areaData_ary[i][k]
                        for (var j in areaData_ary[i][k]) {
                            if (arr[j].value.substring(0, 4).indexOf(item) > -1) {
                                area_ary.push(arr[j])
                            }
                        }
                    }
                }
                this.areaData_ary = area_ary
            }
            console.log('地区列表', this.areaData_ary)
        },
        filepath4(param) {
            console.log('上传图片', param[0])
            this.form.avatar = param[1] + param[0]
            console.log('avatar', this.form.avatar)
            // if (this.ruleForm1.avatar) {
            //     console.log('有上传的图片')
            //     this.$refs['ruleForm1'].clearValidate('avatar')
            //     delete this.$refs['ruleForm1'].rules.avatar
            // }
            this.filepath4li = [
                {
                    filepath: param[0]
                }
            ]
            // await this.$refs.upload4.putFile(this.filepath4li)
        },
        addFenXiao() {
            this.branch.push({
                branch_name: '',
                email: '',
                wechat: '',
                phone: '',
                address: '',
                provinec_id: '',
                city_id: '',
                area_id: '',
                institution_id: this.$store.getters.institute_id
            })
        },
        checkBranch() {
            var isErr = false
            this.branch.forEach((el, index) => {
                let child = this.$refs['Adress_' + index][0]
                this.branch[index].address = child.address
                this.branch[index].provinec_id = child.provinec_id
                this.branch[index].city_id = child.city_id
                this.branch[index].area_id = child.area_id
                if (
                    el.branch_name == '' ||
                    el.email == '' ||
                    el.wechat == '' ||
                    el.phone == '' ||
                    el.address == '' ||
                    el.provinec_id == '' ||
                    el.city_id == '' ||
                    el.area_id == ''
                ) {
                    isErr = true
                }
            })
            return isErr
        },
        delFenXiao(index) {
            this.branch.splice(index, 1)
        },
        editSave(formName) {
            var isErr = this.checkBranch()
            if (isErr) {
                return this.$message.error('请完善分校信息')
            }
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    var queryData = {
                        user_id: this.$store.getters.institute_id,
                        ...this.form,
                        branch: this.branch
                    }
                    queryData.provinec_id = Number(this.provinec_id)
                    queryData.city_id = Number(this.city_id)
                    queryData.area_id = Number(this.area_id)
                    console.log('参数：', queryData)
                    var data = await edit_Mechanism(queryData)
                    if (data.code == 200) {
                        this.$refs.upload4.putFile(this.filepath4li)
                        this.$message({
                            type: 'success',
                            customClass: 'customClass',
                            message: '保存成功!'
                        })
                        this.getList()
                        // this.$router.go(-1)
                        // this.$store.dispatch('tagsView/delView', this.$route)
                    }
                    console.log('保存修改', data)
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style scoped lang='scss'>
.inputBoxWidth {
  width: 400px;
}

.address {
  display: flex;

  .inputAddress {
    width: 300px;
    margin-left: 20px;
  }
}

.fenXiao {
  margin-left: 100px;
}

.delFenXiao {
    width: 90%;
    display: flex;
    flex-direction: row-reverse;
}
</style>
